<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <!--<div style="margin-top:10px">-->
          <!--<el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny">删除</el-button>-->
        <!--</div>-->
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="姓名" label-width="70px">
              <el-input v-model="tableSearchParam.employeeName" style="width:200px" size="small"
                        clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          v-loading="tableLoading">
          <el-table-column
            type="selection"
            width="40">
          </el-table-column>
          <el-table-column
            label="真实姓名"
            property="employeeName"
            width="100">
          </el-table-column>
          <el-table-column
            label="手机号码"
            property="telphone"
            width="95">
          </el-table-column>
          <el-table-column
            label="所在公司"
            property="companyName">
          </el-table-column>
          <!--<el-table-column-->
            <!--label="保单数"-->
            <!--property="orderNum"-->
            <!--width="75">-->
          <!--</el-table-column>-->
          <el-table-column
            label="总积分"
            property="userTotalIntegral"
            width="75">
          </el-table-column>
          <el-table-column
            label="可用积分"
            property="userUnuseIntegral"
            width="75">
          </el-table-column>
          <el-table-column
            label="总分成"
            property="userTotalCommission"
            width="80">
          </el-table-column>
          <el-table-column
            label="可提现分成"
            property="nWithdrawDepositsCommission"
            width="85">
          </el-table-column>
          <el-table-column
            label="已提现分成"
            property="yWithdrawDepositsCommission"
            width="85">
          </el-table-column>
          <el-table-column
            label="冻结中分成"
            property="fWithdrawDepositsCommission"
            width="85">
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-dropdown placement="bottom" trigger="click">
                <el-button>
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button
                      size="mini"
                      icon="el-icon-view"
                      type="primary"
                      @click="viewData(scope.$index, scope.row)">查看详细
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <el-button
                      size="mini"
                      icon="el-icon-sort"
                      type="success"
                      @click="jiedong(scope.$index, scope.row)">解冻分成
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <el-button
                      size="mini"
                      icon="el-icon-sort"
                      type="warning"
                      @click="jifen(scope.$index, scope.row)">调整积分
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <el-button
                      size="mini"
                      icon="el-icon-sort"
                      @click="tiaozheng(scope.$index, scope.row)">调整分成
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[5,10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="救援司机分成" :visible.sync="dialogFormVisible" top="2vh" width="70%">
      <el-form :model="driverPayableData" inline>
        <el-row>
          <el-col :span="4" class="m-col">姓名</el-col>
          <el-col :span="8" class="m-col-left">{{driverPayableData.employeeName}}</el-col>
          <el-col :span="4" class="m-col-left">手机号码</el-col>
          <el-col :span="8" class="m-col-left">{{driverPayableData.telphone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">所在公司</el-col>
          <el-col :span="20" class="m-col-left">{{driverPayableData.companyName}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="m-col" style="font-weight: bold">分成详情</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">保单数</el-col>
          <el-col :span="20" class="m-col-left">
            {{driverPayableData.orderNum}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">总积分</el-col>
          <el-col :span="8" class="m-col-left">{{driverPayableData.userTotalIntegral}}</el-col>
          <el-col :span="4" class="m-col-left">可用积分</el-col>
          <el-col :span="8" class="m-col-left">
            {{driverPayableData.userUnuseIntegral}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">总分成</el-col>
          <el-col :span="8" class="m-col-left">{{driverPayableData.userTotalCommission}}</el-col>
          <el-col :span="4" class="m-col-left">冻结中分成</el-col>
          <el-col :span="8" class="m-col-left">
            {{driverPayableData.fWithdrawDepositsCommission}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col" style="border-bottom: 1px solid #ebeef5;">可提现分成</el-col>
          <el-col :span="8" class="m-col-left" style="border-bottom: 1px solid #ebeef5;">
            {{driverPayableData.nWithdrawDepositsCommission}}
          </el-col>
          <el-col :span="4" class="m-col-left" style="border-bottom: 1px solid #ebeef5;">已提现分成</el-col>
          <el-col :span="8" class="m-col-left" style="border-bottom: 1px solid #ebeef5;">
            {{driverPayableData.yWithdrawDepositsCommission}}
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="解冻分成" :visible.sync="dialogJiedongFormVisible" top="10vh">
      <el-form :model="jiedongData">
        <el-row>
          <el-col :span="12">
            <el-form-item label="解冻前可提现分成" label-width="130px">
              {{jiedongData.yWithdrawDepositsCommission}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="解冻前冻结中分成" label-width="130px">
              {{jiedongData.fWithdrawDepositsCommission}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="解冻分成金额" label-width="130px">
              <el-input-number v-model="jiedongData.intervalCommission" :precision="2" :step="0.01"
                               style="width:250px" @change="commissionChange"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="解冻后可提现分成" label-width="130px">
              {{jiedongData.yWithdrawDepositsCommission1}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="解冻后冻结中分成" label-width="130px">
              {{jiedongData.fWithdrawDepositsCommission1}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogJiedongFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleJiedong">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="调整积分" :visible.sync="dialogJifenFormVisible" top="10vh">
      <el-form :model="jifenData">
        <el-row>
          <el-col :span="24">
            <el-form-item label="调整前可用积分" label-width="130px">
              {{jifenData.userUnuseIntegral}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="调整积分" label-width="130px">
              <el-input-number v-model="jifenData.intervalIntegral" :precision="2" :step="0.01"
                               style="width:250px" @change="integralChange"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="调整后可用积分" label-width="130px">
              {{jifenData.userUnuseIntegral1}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogJifenFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleJifen">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="调整分成" :visible.sync="dialogTiaozhengFormVisible" top="10vh">
      <el-form :model="tiaozhengData">
        <el-row>
          <el-col :span="12">
            <el-form-item label="调整前可提现分成" label-width="130px">
              {{tiaozhengData.yWithdrawDepositsCommission}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调整前冻结中分成" label-width="130px">
              {{tiaozhengData.fWithdrawDepositsCommission}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="调整分成" label-width="130px">
              <el-input-number v-model="tiaozhengData.intervalCommission" :precision="2" :step="0.01"
                               style="width:250px" @change="tiaozhengCommissionChange"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="调整目标" label-width="130px">
              <el-select v-model="tiaozhengData.method" placeholder="请选择" style="width:250px"
                         @change="tiaozhengMethodChange">
                <el-option key="1" label="可提现分成" value="1"></el-option>
                <el-option key="2" label="冻结中分成" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="调整后可提现分成" label-width="130px">
              {{tiaozhengData.yWithdrawDepositsCommission1}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调整后冻结中分成" label-width="130px">
              {{tiaozhengData.fWithdrawDepositsCommission1}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTiaozhengFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleTiaozheng">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .m-col {
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-left {
    border: 1px solid #ebeef5;
    border-left: none;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
  }

  .m-col-bottom {
    border: 1px solid #ebeef5;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-bottom-left {
    border: 1px solid #ebeef5;
    border-left: none;
    padding-left: 10px;
    height: 250px;
    overflow-y: auto;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

<script>
  import rescueEmployeeApi from '@/api/rescueEmployeeApi'

  export default {
    created() {
      this.listTableData()
    },
    data() {
      return {
        dialogJiedongFormVisible: false,
        jiedongData: {},
        dialogJifenFormVisible: false,
        jifenData: {},
        dialogTiaozhengFormVisible: false,
        tiaozhengData: {},
        dialogFormVisible: false,
        driverPayableData: {},
        tableLoading: true,
        tableSearchParam: {
          tableSearchParam: ''
        },
        tableData: [],
        currentPage: 1,
        pageSize: 5,
        total: 0,
        multipleSelection: []
      }
    },
    methods: {
      listTableData() {
        this.tableLoading = true
        rescueEmployeeApi.listDriverPayables(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
          this.tableLoading = false
        }, () => {
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      viewData(index, row) {
        this.driverPayableData = row
        this.dialogFormVisible = true
      },
      jiedong(index, row) {
        this.jiedongData = {
          intervalCommission: 0,
          yWithdrawDepositsCommission1: 0,
          fWithdrawDepositsCommission1: 0
        }

        this.jiedongData.id = row.id
        this.jiedongData.yWithdrawDepositsCommission = row.nWithdrawDepositsCommission
        this.jiedongData.temYWithdrawDepositsCommission = row.nWithdrawDepositsCommission
        this.jiedongData.fWithdrawDepositsCommission = row.fWithdrawDepositsCommission
        this.jiedongData.temFWithdrawDepositsCommission = row.fWithdrawDepositsCommission
        this.dialogJiedongFormVisible = true
      },
      handleJiedong() {
        rescueEmployeeApi.unfreezeCommission(this.jiedongData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.dialogJiedongFormVisible = false
          this.listTableData()
        }, () => {
        })
      },
      commissionChange(value) {
        if (value > 0 && Math.abs(value) > this.jiedongData.temFWithdrawDepositsCommission) {
          this.$message({
            type: 'warning',
            message: '解冻分成超过冻结中分成!'
          })
          return;
        }

        if (value < 0 && Math.abs(value) > this.jiedongData.temYWithdrawDepositsCommission) {
          this.$message({
            type: 'warning',
            message: '解冻分成超过可提现分成!'
          })
          return;
        }
        this.jiedongData.yWithdrawDepositsCommission1 = this.jiedongData.temYWithdrawDepositsCommission + value
        this.jiedongData.fWithdrawDepositsCommission1 = this.jiedongData.temFWithdrawDepositsCommission - value
      },
      jifen(index, row) {
        this.jifenData = {
          intervalIntegral: 0,
          userUnuseIntegral: 0,
          userUnuseIntegral1: 0
        }

        this.jifenData.id = row.id
        this.jifenData.userUnuseIntegral = row.userUnuseIntegral
        this.jifenData.temUserUnuseIntegral = row.userUnuseIntegral
        this.dialogJifenFormVisible = true
      },
      handleJifen() {
        rescueEmployeeApi.adjustmentIntegral(this.jifenData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.dialogJifenFormVisible = false
          this.listTableData()
        }, () => {
        })
      },
      integralChange(value) {
        if (value < 0 && Math.abs(value) > this.jifenData.temUserUnuseIntegral) {
          this.$message({
            type: 'warning',
            message: '调整积分超过可用积分!'
          })
          return;
        }
        this.jifenData.userUnuseIntegral1 = this.jifenData.temUserUnuseIntegral + value
      },

      tiaozheng(index, row) {
        this.tiaozhengData = {
          intervalCommission: 0,
          method: '',
          yWithdrawDepositsCommission1: 0,
          fWithdrawDepositsCommission1: 0
        }

        this.tiaozhengData.id = row.id
        this.tiaozhengData.yWithdrawDepositsCommission = row.nWithdrawDepositsCommission
        this.tiaozhengData.temYWithdrawDepositsCommission = row.nWithdrawDepositsCommission
        this.tiaozhengData.fWithdrawDepositsCommission = row.fWithdrawDepositsCommission
        this.tiaozhengData.temFWithdrawDepositsCommission = row.fWithdrawDepositsCommission
        this.dialogTiaozhengFormVisible = true
      },
      handleTiaozheng() {
        rescueEmployeeApi.adjustmentCommission(this.tiaozhengData, (res) => {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.dialogTiaozhengFormVisible = false
          this.listTableData()
        }, () => {
        })
      },
      tiaozhengCommissionChange(value) {
        if (this.tiaozhengData.method == 2) {
          if (value > 0 && Math.abs(value) > this.tiaozhengData.temYWithdrawDepositsCommission) {
            this.$message({
              type: 'warning',
              message: '调整分成超过可提现分成!'
            })
            return;
          }

          if (value < 0 && Math.abs(value) > this.tiaozhengData.temFWithdrawDepositsCommission) {
            this.$message({
              type: 'warning',
              message: '调整分成超过冻结分成!'
            })
            return;
          }
          this.tiaozhengData.yWithdrawDepositsCommission1 = this.tiaozhengData.temYWithdrawDepositsCommission - value
          this.tiaozhengData.fWithdrawDepositsCommission1 = this.tiaozhengData.temFWithdrawDepositsCommission + value
        } else if (this.tiaozhengData.method == 1) {
          if (value > 0 && Math.abs(value) > this.tiaozhengData.temFWithdrawDepositsCommission) {
            this.$message({
              type: 'warning',
              message: '调整分成超过冻结中分成!'
            })
            return;
          }

          if (value < 0 && Math.abs(value) > this.tiaozhengData.temYWithdrawDepositsCommission) {
            this.$message({
              type: 'warning',
              message: '调整分成超过可提现分成!'
            })
            return;
          }
          this.tiaozhengData.yWithdrawDepositsCommission1 = this.tiaozhengData.temYWithdrawDepositsCommission + value
          this.tiaozhengData.fWithdrawDepositsCommission1 = this.tiaozhengData.temFWithdrawDepositsCommission - value
        }
      },
      tiaozhengMethodChange(value) {
        this.tiaozhengData.intervalCommission = 0
        this.tiaozhengData.yWithdrawDepositsCommission1 = 0
        this.tiaozhengData.fWithdrawDepositsCommission1 = 0
        this.tiaozhengData.yWithdrawDepositsCommission = this.tiaozhengData.temYWithdrawDepositsCommission
        this.tiaozhengData.fWithdrawDepositsCommission = this.tiaozhengData.temFWithdrawDepositsCommission
      }
    }
  }
</script>
